<template>
  <div id="app">
    <el-menu
      :default-active="activeIndex2"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="1">
        <router-link to="/">首页</router-link>
      </el-menu-item>
      <el-menu-item index="2">
        <router-link to="/blog">博客</router-link>
      </el-menu-item>
      <el-menu-item index="3">
        <router-link to="/video">视频</router-link>
      </el-menu-item>
    </el-menu>

    <span v-if="username">
      欢迎：{{ username }}
      <input type="button" @click="logOut" value="注销" />
    </span>
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: localStorage.getItem("usr"),
    };
  },
  watch: {
    "$route.path"() {
      this.username = localStorage.getItem("usr");
    },
  },
  methods: {
    logOut() {
      localStorage.clear();
      this.$router.push("/login");
    },
  },
};
</script>
<style>
</style>
